<template>
    <div class="fluid">
        <div class="container">
            <div class="one">
                <p class="parpOne" style="font-weight:600">360搜索</p>
                <p class="parpThree">360搜索平台拥有海量的优质流量，日均检索量7亿，用户覆盖达62.5%，其中360移动端搜索，低成本竞价排名行业第一；PC端稳居行业第二。企业通过匹配关键词进行精细化投放，准确快速的锁定用户，让潜在客户更快找到企业产品相关信息。</p>
                <div class="OneBtn">
                    <button v-for="(item,index) in list" :key="index" @mouseover="toggle(index)" class="btnAll" :class="{backgWhite:liIndex!=index,backgRed:liIndex==index}" @click="route(index)">
                        <img :src="item[0]">
                        <span :class="{sizewhite:liIndex==index,sizeblack:liIndex!=index}">{{item[1]}}</span>
                    </button>
                </div>
            </div>
            <img src="../../../assets/img/2-indexMedia/SEM/360，神马/1.png"  style=" margin-top:40px;" alt="">
        </div>
	</div>
</template>
<script>
require("../../../assets/css/buttonCommon.css");
const img1 = require("../../../assets/img/2-indexMedia/dsp/2.png");
const img2 = require("../../../assets/img/2-indexMedia/dsp/4.png");
const img3 = require("../../../assets/img/2-indexMedia/dsp/3.png");
const img4 = require("../../../assets/img/2-indexMedia/dsp/5.png");
export default {
  data() {
    return {
      list: [[img1, "联系客服", img3], [img2, "查看详情", img4]],
      liIndex: 1
    };
  },
  created() {
    this.toggle(1);
  },
  methods: {
    toggle(index) {
      this.liIndex = index;
      this.list[0][0] = img1;
      this.list[1][0] = img2;
      this.list[index].splice(0, 1, this.list[index][2]);
    },
    route(index) {
      if (index == 1) {
        this.$router.push({
          path: "/view2/SEMSale",
          query: { type: "SEM", id: 3 }
        });
      } else if (index == 0) {
        this.connectQQ();
      }
    }
  }
};
</script>
<style scoped>
.fluid {
  text-align: left;
}
.container {
  padding-top: 70px;
  padding-left: 40px;
  width: 100%;
  height: 520px;
  position: relative;
}
.one {
  width: 46%;
}
.container > img {
  position: absolute;
  top: 10px;
  right: 80px;
}
.OneBtn {
  margin-top: 60px;
}
.OneBtn > button:nth-child(2) {
  margin-left: 30px;
}
.parpOne {
  font-size: 36px;
  font-family: PingPang SC;
  color: rgb(34, 34, 34);
}
.parpOne > img {
  margin-left: 10px;
}
.parpThree {
  margin-top: 60px;
  font-size: 14px;
  color: rgb(34, 34, 34);
}
.hoverBtnOne > span,
.hoverBtnTwo > span {
  margin-left: 5px;
}
</style>


